import React, { useState } from 'react'
import styles from './index.module.css'
export default function Index(props) {
  const [total, setTotal] = useState('');
  const { onChange } = props;
  const nbrKeyPress = (key) => {

    let dianCount = `${total}${key?.value}`.split('.').length - 1;
    console.warn(dianCount);
    if (!(total?.length) && key?.value === '.') {
      return null;
    } else {
      if (key?.type === 'nbr' && dianCount <= 1) {
        setTotal(`${total}${key.value}`)
        onChange && onChange(`${total}${key.value}`);
      }
    }
  }
  const onDel = () => {
    console.log('ondel');
    if (total?.length) {
      console.log(total.slice(0, -1));
      setTotal(total.slice(0, -1));
      onChange(total.slice(0, -1));
    }
  }

  const okPress = () => {
    const { onSubmit } = props;
    onSubmit && onSubmit();
    setTotal('')
  }
  return (
    <div className={styles.keyBoardWrap}>
      <div className={styles.keyBoardContainer} style={props.style}>
        {keyBoardSingleArr.map((item, index) => {
          return (
            <div
              className={item.type == 'nbr' ? styles.keyBoardNum : styles.keyBoardClear}
              onClick={() => { nbrKeyPress(item) }}
            >
              {item.value}
            </div>
          )
        })}
      </div>
      <div className={styles.keyBoardActionContainer}>
        <div onClick={onDel} className={styles.keyBoardDelete}>del</div>
        <div onClick={okPress} className={styles.keyBoardOk}>OK</div>
      </div>
    </div >
  )
}
const keyBoardSingleArr = [
  { type: 'nbr', value: '1' },
  { type: 'nbr', value: '2' },
  { type: 'nbr', value: '3' },
  { type: 'nbr', value: '4' },
  { type: 'nbr', value: '5' },
  { type: 'nbr', value: '6' },
  { type: 'nbr', value: '7' },
  { type: 'nbr', value: '8' },
  { type: 'nbr', value: '9' },
  { type: 'null', value: '' },
  { type: 'nbr', value: '0' },
  { type: 'nbr', value: '.' },
]